<template>
  <div class="flower_main">
    <el-card v-for="item in plantList" :key="item.id" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>{{ !item.commonName ? "" : item.commonName }}</span>
        </div>
      </template>
      <el-image
          :src="!item.picture ? '' : item.picture"
          :preview-src-list="[!item.picture ? '' : item.picture]"
          fit="contain"
      />
      <template #footer>
        <el-button type="primary" @click="toInfo(item.id)">
          查看详情
        </el-button>
      </template>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plantList: []
    };
  },
  watch: {
    "$route.query.mouth": {
      immediate: true,
      handler() {
        var mouth = this.$route.query.mouth;
        if (mouth) {
          this.getPlantByMouth(mouth);
        }
      }
    },
    // 监视搜索词变化
    "$route.query.genusId": {
      immediate: true,
      handler() {
        var genusId = this.$route.query.genusId;
        if (genusId) {
          this.getPlantByGenus(genusId);
        }
      }
    },
    // 监视搜索词变化
    "$route.query.familyName": {
      immediate: true,
      handler() {
        var familyName = this.$route.query.familyName;
        if (familyName) {
          this.getPlantByFamily(familyName);
        }
      }
    },
    // 监视搜索词变化
    "$route.query.genusName": {
      immediate: true,
      handler() {
        var genusName = this.$route.query.genusName;
        if (genusName) {
          this.getPlantByGenusName(genusName);
        }
      }
    },
    // 监视搜索词变化
    "$route.query.plantName": {
      immediate: true,
      handler() {
        var plantName = this.$route.query.plantName;
        if (plantName) {
          this.getPlants(plantName);
        }
      }
    }
  },
  methods: {
    toInfo(id) {
      this.$router.push({
        path: "/info",
        query: { id: id }
      });
    },
    //根据月份查询
    getPlantByMouth(mouth) {
      this.$store.dispatch("plant/plantByMonth", mouth).then(response => {
        this.plantList = response;
      });
    },
    getPlantById(id) {
      this.$store.dispatch("plant/plantById", id).then(response => {
        this.plantList = [response];
      });
    },
    //根据植物名
    getPlants(name) {
      this.$store.dispatch("plant/plantByName", name).then(response => {
        this.plantList = response;
      });
    },
    //根据科目名
    getPlantByFamily(name) {
      this.$store.dispatch("plant/plantByFamily", name).then(response => {
        this.plantList = response;
      });
    },
    //根据属性查询植物
    getPlantByGenusName(genusName) {
      this.$store
        .dispatch("plant/getPlantByGenusName", genusName)
        .then(response => {
          this.plantList = response;
        });
    },
    //根据分类id
    getPlantByGenus(genusId) {
      this.$store.dispatch("plant/plantByGenusId", genusId).then(response => {
        this.plantList = response;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  width: 30%;
  float: left;
  margin: 1.5%;
  // height: 300px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid white;
}

.el-card {
  .el-image {
    // height: 80%;
    width: 200px;
    height: 200px;
  }
}
</style>
